<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no" />
		<title>Document</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/bootstrap-table.min.css" />
	</head>

	<body>
		<!-- 自定义工具条 -->
		<div class="toolbar">
			<a class="btn btn-default" data-toggle="modal" href="#modal-add">添加
				<i class="text-primary glyphicon glyphicon-plus"></i>
			</a>
		</div>
		<!-- 数据表格 -->
		<table class="table table-hover" data-toolbar=".toolbar" data-striped="true" data-pagination="true"
			data-page-number="1" data-page-size="10" data-page-list="[5,10,15,20]" data-show-refresh="true"
			data-show-columns="true" data-show-toogle="true"></table>
		<!-- data-show-refresh刷新按钮 -->
		<!-- data-show-columns列切换按钮 -->
		<!-- data-show-toogle 其他工具按钮 -->

		<div class="modal fade" id="modal-add">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header text-center">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">添加文章</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="addForm">
							<div class="form-group">
								<label for="title" class="col-sm-2 control-label">标题</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="title" name="title" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">分类</label>
								<div class="col-sm-10 caregories">
									<div class="col-sm-10 caregories">
										<label>
											<input type="checkbox" name="type" value="1">HTML/HTML5
										</label>
										<label>
											<input type="checkbox" name="type" value="2">CSS/CSS3
										</label>
										<label>
											<input type="checkbox" name="type" value="3">VUE
										</label>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label for="img_src" class="col-sm-2 control-label">封面</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="img_src" name="img_src" readonly
										value="upload/7e0757042c7b4162946e3d7f6a527c95.jpg" />
								</div>
							</div>
							<div class="form-group">
								<label for="context" class="col-sm-2 control-label">正文</label>
								<div class="col-sm-10">
									<textarea name="context" class="form-control" id="context" rows="10"></textarea>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-offset-6 col-sm-6">
									<button type="submit" class="btn btn-primary">发布</button>
									<button type="reset" class="btn btn-default">重置</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="modal-upt">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header text-center">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">修改文章</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="id" class="col-sm-2 control-label">编号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="id" name="id" readonly />
								</div>
							</div>
							<div class="form-group">
								<label for="title" class="col-sm-2 control-label">标题</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="title" name="title" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">分类</label>
								<div class="col-sm-10 caregories">
									<label>
										<input type="checkbox" name="type" value="1">HTML/HTML5
									</label>
									<label>
										<input type="checkbox" name="type" value="2">CSS/CSS3
									</label>
									<label>
					 				<input type="checkbox" name="type" value="3">VUE
									</label>
								</div>
							</div>
							<div class="form-group">
								<label for="img_src" class="col-sm-2 control-label">封面</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="img_src" name="img_src" readonly />
								</div>
							</div>
							<div class="form-group">
								<label for="context" class="col-sm-2 control-label">正文</label>
								<div class="col-sm-10">
									<textarea name="context" class="form-control" id="context" rows="10"></textarea>
								</div>
							</div>
							<input type="hidden" name="show_id" id="show_id" value="" />
							<div class="form-group">
								<div class="col-sm-offset-9 col-sm-3">
									<button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
									<button type="submit" class="btn btn-primary">修改</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/bootstrap.min.js"></script>
		<script src="../../js/my_connect.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-table.min.js"></script>
		<script>
			//获取数据 查询出全部文章
			function load() {
				fetch("../../api/Account.php/GetAll")
				.then(res=>res.json())
				.then(res => {
					console.log(res);
					//表格插件 初始化代码
					$('.table')
				 	.bootstrapTable('destroy')
						.bootstrapTable({
							data: res.data,
							columns: [{
									field: 'id',
									title: '编号',
								},
								{
									field: 'title',
									title: '标题',
								},
								{
									field: 'datetime',
									title: '发表时间',
								},
				  		{
									title: '操作',
									formatter: function(value, row, index) {
										return `
				    <a class="text-danger" onclick="delClick('${row.show_id}')" title="删除">
				      <i class="glyphicon glyphicon-remove"></i>
				    </a>
				    <a class="text-primary" onclick="uptClick('${row.show_id}')" title="修改">
				      <i class="glyphicon glyphicon-edit"></i>
				    </a>`;
									},
				 			},
							],
						});
				})
			}
			load();
			//删除文章的功能
			async function delClick(show_id) {
				let flag = confirm("确定要删除吗？");
				if (flag) {
					let {
						status
					} = await ($$.articleDelete({
						show_id
					}))
					if (status) {
						//页面刷新
						load();
					} else {
						alert("网络延迟删除失败")
					}
				}
			}
			//添加文章的功能
			$("#addForm").submit(function(e) {
				e.preventDefault();
				//获取表单的数据
				let title = $("#addForm input[name='title']").val();
				let type = $("#addForm input[name='type']:checked").val();
				let img_src = $("#addForm input[name='img_src']").val();
				let context = $("#addForm textarea[name='context']").val();
				$$.articleInsert({
					title,
					type,
					img_src,
					context
				}).then(res => {
					if (res.status) {
						alert("添加成功");
						load();
						$("#modal-add").modal("toggle");
					} else {
						alert("文章发布失败");
					}
				})
			})

			function uptClick(show_id) {

				//2 根据show_id 查询对应的一篇文章
				$$.getOneArticle2({
					show_id
				}).then(res => {
					console.log(res);
					if (res.status) {
						//展现出模态框
						$("#modal-upt").modal("toggle");
						$("#modal-upt input[name='id']").val(res.data[0].id);
						$("#modal-upt input[name='title']").val(res.data[0].title);
						$("#modal-upt input[name='img_src']").val(res.data[0].img_src);
						$("#modal-upt textarea[name='context']").val(res.data[0].context);
						//隐藏的show_id
						$("#modal-upt input[name='show_id']").val(res.data[0].show_id);
						//获取全部的 type类型的input
						let inps = $("#modal-upt input[name='type']");
						inps.each(function(n) {
							if (inps[n].value == res.data[0].type) {
								//被选中的状态
								$(inps[n]).prop("checked", true)
							} else {
								$(inps[n]).prop("checked", false)
							}
						})
					} else {
						alert("网络延迟，请稍后尝试");
					}
				})
			}

			//4 监听提交事件 将输入发到对应的接口
			//更新模态框的提交事件
			$("#modal-upt").submit(function(e) {
				e.preventDefault();
				//收集数据 发送给API 根据show_id 、title、type、context更新的文章信息
				let title = $("#modal-upt input[name='title']").val();
				let type = $("#modal-upt input[name='type']:checked").val();
				let context = $("#modal-upt textarea[name='context']").val();
				let show_id = $("#modal-upt input[name='show_id']").val();
				$$.articleUpdate({
					title,
					type,
					context,
					show_id
				}).then(res => {
					if (res.status) {
						alert("更新成功");
						load();
						$("#modal-upt").modal("toggle");
					} else {
						alert("文章更新失败");
					}
				})
			});
		</script>
	</body>
</html>
